import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';

import { List, InputItem,Carousel,Modal,  Toast, Flex,Icon,WingBlank,ImagePicker,TextareaItem,Checkbox} from 'antd-mobile';
import { createForm } from 'rc-form';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import MyScroll from '../../components/MyScroll/MyScroll';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
import {evaluate} from "./evaluate.less";
import xiangjisvg from "../../assets/img/xiangji.svg";
import xing from '../../assets/svg/xing.svg';
import xing2 from '../../assets/svg/xing2.svg';
import Moment from "moment/moment";
import {evalute_madel} from "../evaluate/EvaluateListItem.less";

const {Item} =List;
const AgreeItem = Checkbox.AgreeItem;
class Evaluate extends Component {
    constructor(props) {
        super(props);
        this.state={
            visible:false,
            num:0,
            gevalIsAnonymous:1,
            gevalIsAnonymou:1,
            miaoshu:5,
            wuliu:5,
            fuwu:5,
            files:[],
            i:this.props.match.params.Data
        };
        this.imgURL = this.props.orderList.imgUrl;
    }
    show  = (i) =>{
        this.setState({
            visible:true,
            num:i
        })
    }
    onChange = (files, type, index) => {
        if (files.length >9) return !Toast.fail("上传图片数量超过限制!", 2);
        this.setState({
            files,
        });

        if (type == "add") this.props.dispatch({type: "orderList/upLoadEFF", obj:{upfile: files[files.length - 1].file}})
        else if ( type == "remove") this.imgURL.splice(index, 1)
        console.log(this.imgURL)
    }
    componentDidMount(){
        this.props.dispatch({type: "orderList/OrderDetailEFF", obj: this.props.match.params.data});
        if(this.props.match.params.id!=1){
            this.props.dispatch({ type:'evaluateDetail/evaluateDetailEFF', obj:{ id:this.props.match.params.id } });
        }
    }

    postComment = () => {
        const {count} =this.props.form.getFieldsValue();
        const {orderDetail={},orderGoodsEntityList=[]} = this.props.orderList;
        const {
            files,
            gevalIsAnonymous,
            gevalIsAnonymou,
            gevalContent,
            miaoshu,
            wuliu,
            fuwu,
            i
        } = this.state;
        console.log(count)

        if(orderGoodsEntityList[i].evaluationId ==""){

            if(files.length==0){
                Toast.loading();
                this.props.dispatch({type:"orderList/EvaluateEFF",
                    obj:{orderSn:orderDetail.orderSn,
                        recId:orderGoodsEntityList[this.props.match.params.Data].recId,
                        sevalDesccredit:miaoshu==""?5:miaoshu,
                        sevalServicecredit:fuwu==""?5:fuwu,
                        sevalDeliverycredit:wuliu==""?5:wuliu,
                        gevalContent:count==undefined?"买家未填写评价内容!":count,
                        gevalIsAnonymous:gevalIsAnonymous
                    }}).then((result)=>{
                    Toast.hide();
                    if (result.code == 200) {
                        Toast.success(result.msg, 1, () => {
                            this.props.dispatch(routerRedux.replace({
                                pathname:`/orderList/${3}`
                            }))
                        });
                    } else {
                        // Toast.info(result.msg);
                    }
                })
            }else{
                this.props.dispatch({type:"orderList/EvaluateEFF",
                    obj:{orderSn:orderDetail.orderSn,
                        recId:orderGoodsEntityList[this.props.match.params.Data].recId,
                        sevalDesccredit:miaoshu==""?5:miaoshu,
                        sevalServicecredit:fuwu==""?5:fuwu,
                        sevalDeliverycredit:wuliu==""?5:wuliu,
                        gevalContent:count==undefined?"买家未填写评价内容!":count,
                        gevalIsAnonymous:gevalIsAnonymous,
                        imgUrl: this.imgURL.join(",")
                    }}).then((result)=>{
                    Toast.hide();
                    if (result.code == 200) {
                        Toast.success(result.msg, 1, () => {
                            this.props.dispatch(routerRedux.replace({
                                pathname:`/orderList/${3}`
                            }))
                        });
                    } else {
                        // Toast.info(result.msg);
                    }
                })
            }}else if(orderGoodsEntityList[i].evaluationId !==""){
            if(count===undefined){
                Toast.info("请填写评价内容",2);
                return
            }
            if(files.length==0){
                Toast.loading();
                this.props.dispatch({type:"orderList/evaluateEFF",
                    obj:{id:orderGoodsEntityList[i].evaluationId ,gevalContent:count,
                        isAddComment:1,
                        gevalIsAnonymous:gevalIsAnonymous
                    }}).then((result)=>{
                    Toast.hide();
                    if (result.code == 200) {
                        Toast.success(result.msg, 1, () => {
                            this.props.dispatch(routerRedux.replace({
                                pathname:`/orderList/${3}`
                            }))
                        });
                    } else {
                        // Toast.info(result.msg);
                    }
                })
            }else{
                this.props.dispatch({type:"orderList/evaluateEFF",
                    obj:{id:orderGoodsEntityList[i].evaluationId ,gevalContent:count,
                        isAddComment:1,
                        gevalIsAnonymous:gevalIsAnonymous,
                        img: this.imgURL.join(",")
                    }}).then((result)=>{
                    Toast.hide();
                    if (result.code == 200) {
                        Toast.success(result.msg, 1, () => {
                            this.props.dispatch(routerRedux.replace({
                                pathname:`/orderList/${3}`
                            }))
                        });
                    } else {
                        // Toast.info(result.msg);
                    }
                })
            }
            }
        }



    render() {
        const { getFieldProps, getFieldError } = this.props.form;
        const {dispatch,evaluateDetail,app}=this.props;
        const { evaluateDetailEntity=[] ,secondLevelEvaluateGoodsEntityList=[]} = evaluateDetail;
        const {orderDetail={},orderGoodsEntityList} = this.props.orderList;
        const imgArr = evaluateDetailEntity.gevalImage||[];
        const {
            num,
            visible,
            files,
            gevalIsAnonymous,
            gevalIsAnonymou,
            gevalContent,
            miaoshu,
            wuliu,
            fuwu,
            i
        } = this.state;
        console.log(this.props);
        return (
            <Flex style={{
            }} direction="column"
                className={evaluate}
            >
                <NavTopBar title={orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId !==""?"追加评价":"发表评价"} dispatch={this.props.dispatch}/>
            <MyScroll style={{position: 'absolute', top: '.8rem', bottom: '.8rem',background:"#fff"}}>
                {orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId ==""?"": <WingBlank>
                    <Flex style={{ padding:'0.2rem 0' }} >
                            <div style={{width:"1.5rem",height:"1.5rem",border:"1px solid #e5e5e5"}}>
                                <NoLazyImg src={orderGoodsEntityList[i]!==undefined?orderGoodsEntityList[i].goodsImage:""} style={{width:"1.5rem",height:"1.5rem"}} />
                            </div>
                            <div style={{ marginLeft:'0.2rem',width:"100%",fontSize:".3rem" }} >
                                <div style={{ marginBottom:'0.5rem',lineHeight:".35rem" }}>{orderGoodsEntityList[i]!==undefined?orderGoodsEntityList[i].goodsName:""}</div>
                                <Flex justify="between">
                                    <div>
                                        {
                                            [...Array(evaluateDetailEntity.gevalScore||0)].map((_, ii) => {
                                                return <Icon size="xxs" type={xing.id} key={ii} />
                                            })
                                        }
                                        {
                                            [...Array(5 - evaluateDetailEntity.gevalScore||0)].map((_, ii) => {
                                                return  <Icon size="xxs" type={xing2.id} key={ii} />
                                            })
                                        }
                                    </div>
                                    <div style={{ color:"#999" }}>{evaluateDetailEntity.gevalAddTimeStr}</div>
                                </Flex>

                            </div>

                    </Flex>

                    <div  style={{ color:"#666", padding:"0.2rem 0rem",fontSize:".3rem" }}>{ evaluateDetailEntity.gevalContent  }</div>
                    <Flex style={{ width:"100%",position:'relative',paddingBottom:".5rem" }}>
                        {imgArr.slice(0,4).map((vv,ii,aa)=>{
                            return (
                                <div onClick={ ()=>{ this.show(ii) } }  className="gevalImage" key={ii}>
                                    <NoLazyImg  src={vv}></NoLazyImg>
                                </div>
                            )
                        })}
                        { imgArr.length>4 ? <div className="geval_image_length">共{imgArr.length}张</div>:"" }
                    </Flex>
                    <div
                        className="text-overflow-hidden spec_info"
                        dangerouslySetInnerHTML={{ __html: evaluateDetailEntity.specInfo }}
                    />
                </WingBlank>}

                {orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId ==""?"":<div style={{background:"#eee",width:"100%",height:".2rem"}}></div>}

                    <List style={{width:"100%"}}>
                        {orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId ==""?"":<WingBlank><div style={{fontSize:".35rem",marginTop:".3rem",marginBottom:".3rem"}}>追加评论</div></WingBlank>}
                        {
                            orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId ==""? <Item>
                                <NoLazyImg src={orderGoodsEntityList[i].goodsImage} style={{width:"1rem",height:"1rem"}}/>
                                {/*<img src={"http://testbbc.leimingtech.com"+orderGoodsEntityList.goodsImage} style={{width:"1rem",height:"1rem"}} alt="" />*/}
                                <span style={{fontSize:".3rem",marginLeft:".2rem"}}>{orderGoodsEntityList[i].goodsName}</span>
                            </Item>:""
                        }
                        <Item>
                            <TextareaItem
                                {...getFieldProps('count')}
                                placeholder="输入评价内容"
                                clear
                                rows={5}
                                count={orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId ==""?500:150}
                                style={{borderBottom:"0"}}
                            />
                            <div >
                                {/*<Icon type={xiangjisvg.id} style={{width:".7rem",height:".7rem",marginTop:".2rem"}}></Icon>*/}
                                {/*<p>添加图片</p>*/}
                                <ImagePicker
                                    files={files}
                                    onChange={this.onChange}
                                    multiple={true}
                                    selectable={files.length < 9}
                                />
                            </div>
                        </Item>
                        {orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId ==""?<Item>
                            <Flex style={{margin:".3rem 0"}}>
                                <AgreeItem
                                    style={{color: '#000'}}
                                    checked={gevalIsAnonymou == 1}
                                    onChange={e => this.setState({
                                        gevalIsAnonymou: e.target.checked ? 1 : 0
                                    })}>
                                    &nbsp;参与优质评选活动
                                </AgreeItem>
                            </Flex>
                        </Item>:""}

                    </List>
                {orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId==""? <List style={{width:"100%",marginTop:".2rem", fontSize: '.28rem'}}>
                        <Item>
                            <Flex style={{width:"100%"}}>
                                <p>描述相符</p>
                                {
                                    [...Array(5)].map((item,i)=>{
                                        return <Icon type={i>=miaoshu?xing2.id:xing.id} key={i} style={{marginLeft:".3rem"}} onClick={()=>{
                                            this.setState({
                                                miaoshu:i+1,
                                            })
                                        }}/>
                                    })
                                }
                                <span style={{marginLeft:".3rem"}}>
                                {
                                    miaoshu+1==2?"非常差":miaoshu+1==3?"差":miaoshu+1==4?"一般":miaoshu+1==5?"好":miaoshu+1==6?"非常好":""
                                }
                            </span>
                            </Flex>
                        </Item>
                        <Item>
                            <Flex style={{width:"100%"}}>
                                <p>物流服务</p>
                                {
                                    [...Array(5)].map((item,i)=>{
                                        return <Icon type={i>=wuliu?xing2.id:xing.id} key={i} style={{marginLeft:".3rem"}} onClick={()=>{
                                            this.setState({
                                                wuliu:i+1,
                                            })
                                        }}/>
                                    })
                                }
                                <span style={{marginLeft:".3rem"}}>
                                {
                                    wuliu+1==2?"非常差":wuliu+1==3?"差":wuliu+1==4?"一般":wuliu+1==5?"好":wuliu+1==6?"非常好":""
                                }
                            </span>
                            </Flex>
                        </Item>
                        <Item>
                            <Flex style={{width:"100%"}}>
                                <p>服务态度</p>
                                {
                                    [...Array(5)].map((item,i)=>{
                                        return <Icon type={i>=fuwu?xing2.id:xing.id} key={i} style={{marginLeft:".3rem"}} onClick={()=>{
                                            this.setState({
                                                fuwu:i+1,
                                            })
                                        }}/>
                                    })
                                }
                                <span style={{marginLeft:".3rem"}}>
                                {
                                    fuwu+1==2?"非常差":fuwu+1==3?"差":fuwu+1==4?"一般":fuwu+1==5?"好":fuwu+1==6?"非常好":""
                                }
                            </span>
                            </Flex>
                        </Item>
                        {/* <Item style={{ height: "1.8rem", backgroundColor:'#F7F7F7' }}></Item> */}
                    </List>:""}

                </MyScroll>
                {orderGoodsEntityList[i]!==undefined&&orderGoodsEntityList[i].evaluationId==""?<Flex style={{backgroundColor:"#fff",width:"100%",position:"absolute",bottom:"0"}} justify="between">
                    <Flex >
                        <AgreeItem
                            style={{color: '#000'}}
                            checked={gevalIsAnonymous == 1}
                            onChange={e => this.setState({
                                gevalIsAnonymous: e.target.checked ? 1 : 0
                            })}>
                            &nbsp;匿名评价
                        </AgreeItem>
                    </Flex>
                    <div style={{padding:".3rem 1rem",backgroundColor:"#ff0036",color:"#fff",fontSize:".3rem"}} onClick={this.postComment}>发布</div>
                </Flex>:<Flex style={{backgroundColor:"#fff",width:"100%",position:"absolute",bottom:"0"}} justify="between">
                    <div style={{padding:".3rem 1rem",backgroundColor:"#ff0036",color:"#fff",width:"100%",textAlign:"center",fontSize:".3rem"}} onClick={this.postComment}>提交</div>
                </Flex>}


                <Modal
                    visible={visible}
                    transparent
                    maskClosable={false}
                    className={evalute_madel}
                    //onClose={this.onClose('modal1')}
                    //title="Title"
                    // footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                    // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                >
                    <div style={{ height:"100%" }}>
                        <Flex className="title" justify="between">
                            <div
                                onClick={()=>{ this.setState({
                                    visible:false
                                }) }}
                            >
                                <Icon type="left" />
                            </div>
                            <div>
                                {num+1}/{imgArr.length}
                            </div>
                            <div></div>
                        </Flex>

                        <Flex className="ev_carousel">
                            <Carousel
                                //key={this.state.num}
                                //  className={index_banner}
                                selectedIndex={num}
                                //autoplay={data.length != 1}
                                autoplay={false}
                                afterChange={(n)=>{
                                    this.setState({
                                        num:n
                                    })
                                }}
                                infinite
                                dots={false}
                                // resetAutoplay={true}
                            >
                                {
                                    imgArr.map((item, index) => (
                                        <div key={index} style={{height:"5rem"}}>
                                            <NoLazyImg
                                                onClick={()=>{ this.setState({
                                                    visible:false
                                                }) }}
                                                onLoad={
                                                    ()=>{
                                                        window.dispatchEvent(new Event('resize'));
                                                    }
                                                }
                                                style={{ width:"100%", height:"100%" }}
                                                src={item}
                                            />
                                        </div>
                                    ))
                                }
                            </Carousel>
                        </Flex>


                        <CanChangeScroll wrapperId="EvaluateItemWraperId" targetId="EvaluateItemTargetId" className="evaluate_scroll">
                            <div>
                                {
                                    [...Array(evaluateDetailEntity.gevalScore||0)].map((_, ii) => {
                                        return <Icon size="xxs" type={xing.id} key={ii} />
                                    })
                                }
                                {
                                    [...Array(5 - evaluateDetailEntity.gevalScore||0)].map((_, ii) => {
                                        return  <Icon size="xxs" type={xing2.id} key={ii} />
                                    })
                                }
                            </div>
                            <div
                                style={{ fontSize:"0.22rem", color:"#ccc" }}
                                className="spec_info"
                                dangerouslySetInnerHTML={{ __html: evaluateDetailEntity.specInfo }}
                            />
                            <div style={{ padding:'0.1rem 0rem' }}>{ evaluateDetailEntity.gevalContent  }</div>
                        </CanChangeScroll>



                    </div>

                </Modal>
            </Flex>
        );
    }
}

export default connect(({ orderList,evaluateDetail  }) => ({ orderList,evaluateDetail  }))(createForm()(Evaluate));
